<template>
	<view class="content">
		<view class="bgc_color">
			<view class="bgc_top"></view>
			<view class="bgc_bottom"></view>
		</view>
		<view class="container">
			<view class="user_name">
				<text style="margin-right: 20rpx;">🧑🏻</text>
				{{user.nickname}}
			</view>
			<view class="other_info">
				<u-cell-group :style="{fontSize:'32px'}" :border="false">
					<u-cell title="用户名" :label="user.username" center></u-cell>
					<u-cell title="所属部门" :label="user.deptName" center></u-cell>
					<u-cell title="角色" :label="user.roles.map(i=>i.name).join(',')" center></u-cell>
				</u-cell-group>
			</view>
			<view class="operation">
				<u-cell-group :style="{fontSize:'32px'}" :border="false">
					<u-cell title="当前版本" size="large" :border="false" value="V0.08" center></u-cell>
					<u-cell title="退出登录" size="large" :border="false" center isLink @click="loginOut"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<u-tabbar :value="activeName" :placeholder="false" :border="false" @change="changePage">
			<u-tabbar-item name="home" text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item name="my" text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		removeStorage
	} from '@/utils/storage.js'
	export default {
		data() {
			return {
				activeName: 'my',
				user: {}
			}
		},
		created() {
			this.user = this.$store.state.user.user
		},
		methods: {
			changePage(val) {
				if (val === 'my') {
					uni.reLaunch({
						url: '/pages/mine/mine'
					})
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			loginOut() {
				removeStorage('authCode')
				removeStorage('token')
				removeStorage('user')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.bgc_color {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;

			.bgc_top {
				width: 100%;
				height: 35%;
				background-color: #5290FF;
			}

			.bgc_bottom {
				width: 100%;
				height: 65%;
				background-color: #F5F5F5;
			}
		}

		.user_name {
			position: fixed;
			left: 0;
			right: 0;
			padding: 0 30rpx;
			top: 10%;
			text-align: center;
			font-size: 60rpx;
			font-weight: 700;
			color: #fff;
		}

		.other_info {
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			padding: 30rpx;
			top: 20%;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.operation {
			position: fixed;
			left: 0;
			right: 0;
			padding: 30rpx;
			bottom: 12%;
			background-color: rgba(255, 255, 255, .8);
		}
	}
</style>